<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    .ba-navbar>div .ba-ps{
      color: white;
      text-decoration: underline;
      font-size: 14px;
    }
    .nav .nav-item a{
      transform: translate(230px,6px);
      color: black;
      font-size: 14px;
    }
    .nav .nav-item a:hover{
      color: gray;
    }
    .ba-navbar .ba-center{
      margin: auto;
    }
  .breadcrumb-item+.breadcrumb-item::before{
      content: " ";
    }
    .bblsp{padding-top: 36px;}
    div ul .bbltp{
      padding-left: 24px;
      padding-right: 24px;
      margin-bottom: 36px;
      background-color: white;
    }
    .bbltp img{width: 260px;height: 304px;}
    .bblsp div h4 {
      padding-bottom: 10px;
      padding-left: 25px;
      padding-right: 20px;
    }
    .spxq button{
      color: black;
      background-color: white;
      width: 178px;
      height: 44px;
    }
    .spxq button:hover{
      background-color: black;
      color: white;
      cursor: pointer;
    }
    .bblrp .div:first-child{width: 1100px;height: 469px;}
    .rp{width: 370px;height: 440px;}
    .rp img{width: 340px;height: 340px;}
    .rp a{
      color: black;
      text-decoration: underline;
    }
    .rp a:hover{
      color: gray;
    }
    .bblyd div .yd-title{
      background-color: rgb(248, 246, 246);
      align-content: center;
    }
    .bblyd div .yd-title p{
      padding-bottom: 18px;
    }
    .bblyd .yd-title div ul li a{
      color: black;
      font-size: 12px;
    }
    .bblyd .yd-title div ul li a:hover{
      color: rgb(155, 153, 153);
      text-decoration: none;
    }
    .bblyd1 div .yd-title1{
      background-color: rgb(219, 217, 217);
    }
    .bblyd1 div .yd-title1 ul{width: 1280px;height: 142px;}
    .bblyd1 div .yd-title1 ul li{
      padding-bottom: 24px;
    }
    .bblp1 a{
      color: black;
    }
  </style>
</head>
<body>
  <!-- 页头 -->
  <div class="ba-navbar w-100">
    <div class="bg-dark text-center pt-3 pb-2"><a href="#" class="ba-ps">免费配送及退货</a></div>
    <!-- 导航条 -->
    <div class="ba-center clearfix container">
      <div class="navbar bg-none navbar-light navbar-expand-lg position-relative">
        <!-- logo -->
        <a href="#" class="navbar-brand">
          <img src="./img/011.jpg" alt="" class="w-25 h-25 mt-2">
        </a>
        <!-- 小菜单 -->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#bamenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 大菜单 -->
        <div id="bamenu" class="collapse navbar-collapse"></div>
        <!-- 导航 -->
        <div class="ba-nav position-absolute d-none d-xl-block">
          <ul class="nav">
            <li class="nav-item">
              <a href="#" class="nav-link">佳节献礼</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">最新上架</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">个性化定制</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">女士</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">男士</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">儿童</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">外套</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">包款</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">博柏利故事</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link font-weight-bold">BEYOND</a>
            </li>
          </ul>
        </div>
        <!-- 菜单组 -->
          <div class="ba-mlist d-block">
          <a href="#" class="breadcrumb-item"><img src="./img/sousuo.png" alt=""></a>
          <a href="#" class="breadcrumb-item"><img src="./img/yonghu.png" alt=""></a>
          <a href="#" class="breadcrumb-item"><img src="./img/gouwudai.png" alt=""> 0</a>
         </div>
        </div>
      </div>
    </div>
    <div class="bg-light bblxp">
      <div class="container">
        <div class="bblxp1">
        </div>
        <div class="bblxp2">
          <div class="bblxp3">
          <h2>上架新品</h2>
          <p class="d-none d-lg-block d-xl-block">探索由首席创意总监 Riccardo Tisci 匠心设计的新季成衣及配饰系列精品，选购以
             Burberry 米色、军绿色及钴蓝色调打造的男女装及童装新品。</p>
        </div>
      </div>
      <div class="d-flex bblxp4">
        <div class="dropdown">
          <button class="btn btn-light dropdown-toggle" data-toggle="dropdowm" aria-expanded="false">商品类别</button>
        </div>
        <div class="dropdown">
          <button class="btn btn-light dropdown-toggle" data-toggle="dropdowm" aria-expanded="false">颜色</button>
        </div>
        <div class="dropdown float-right">
          <button class="btn btn-light dropdown-toggle" data-toggle="dropdowm" aria-expanded="false">按价格排序</button>
        </div>
      </div>

      </div>
    </div>
  </div>
    <!-- 上面商品 -->
    <div class="bblsp">
      <div class="container">
        <h4>女士</h4>
        <ul class="list-unstyled row">
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/1.webp" alt="" class="m-auto d-block">
            <p class="text-center">可拆式连帽格纹羽绒服</p>
            <span class="text-center d-block">¥15,500.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/3.webp" alt="" class="m-auto d-block">
            <p class="text-center">双面两用格纹拼专属标识羊绒围巾</p>
            <span class="text-center d-block">¥5100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/5.webp" alt="" class="m-auto d-block">
            <p class="text-center">Lola – 小号绗缝格纹羊绒萝纳包</p>
            <span class="text-center d-block">¥15,800.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/7.webp" alt="" class="m-auto d-block">
            <p class="text-center">双面两穿格纹羊毛大衣</p>
            <span class="text-center d-block">¥21,500.00</span>
          </li>
        </ul>
        <ul class="list-unstyled row">
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/9.webp" alt="" class="m-auto d-block">
            <p class="text-center">对比感格纹羊绒围巾</p>
            <span class="text-center d-block">¥5100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/10.webp" alt="" class="m-auto d-block">
            <p class="text-center">可拆式连帽羽绒外套</p>
            <span class="text-center d-block">¥11,200.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/11.webp" alt="" class="m-auto d-block">
            <p class="text-center">小号格纹羊绒斜背包</p>
            <span class="text-center d-block">¥9700.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/13.webp" alt="" class="m-auto d-block">
            <p class="text-center">格纹羊毛宽松衬衫</p>
            <span class="text-center d-block">¥9200.00</span>
          </li>
        </ul>
        <div class="spxq d-block text-center">
        <button>浏览全部(107)</button>
      </div>
      </div>
      <div class="container">
        <h4>男士</h4>
        <ul class="list-unstyled row">
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/15.webp" alt="" class="m-auto d-block">
            <p class="text-center">坐标印花皮革卡片夹（官网独售）</p>
            <span class="text-center d-block">¥2400.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/17.webp" alt="" class="m-auto d-block">
            <p class="text-center">双面两用格纹拼专属标识羊绒围巾</p>
            <span class="text-center d-block">¥5100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/19.webp" alt="" class="m-auto d-block">
            <p class="text-center">双面两穿格纹羊毛衬衫式外套</p>
            <span class="text-center d-block">¥12,500.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/21.webp" alt="" class="m-auto d-block">
            <p class="text-center">领尖扣衣领格纹棉质法兰绒衬衫</p>
            <span class="text-center d-block">¥6000.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/23.webp" alt="" class="m-auto d-block">
            <p class="text-center">徽标图案羊绒毛线帽</p>
            <span class="text-center d-block">¥2900.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/25.webp" alt="" class="m-auto d-block">
            <p class="text-center">格纹羽绒羊毛外套</p>
            <span class="text-center d-block">¥16,900.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/27.webp" alt="" class="m-auto d-block">
            <p class="text-center">格纹压花皮革双折钱夹（国际版）</p>
            <span class="text-center d-block">¥3500.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/29.webp" alt="" class="m-auto d-block">
            <p class="text-center">专属标识图案羊绒针织衫</p>
            <span class="text-center d-block">¥7700.00</span>
          </li>
        </ul>
        <div class="spxq d-block text-center">
        <button>浏览全部(130)</button>
      </div>
      </div>
      <div class="container">
        <h4>儿童</h4>
        <ul class="list-unstyled row">
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/31.webp" alt="" class="m-auto d-block">
            <p class="text-center">徽标印花棉质 T 恤衫</p>
            <span class="text-center d-block">¥1100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/33.webp" alt="" class="m-auto d-block">
            <p class="text-center">徽标印花棉质 T 恤衫</p>
            <span class="text-center d-block">¥1100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/35.webp" alt="" class="m-auto d-block">
            <p class="text-center">标志性条纹徽标印花棉质嘎巴甸运动鞋</p>
            <span class="text-center d-block">¥2200.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/37.webp" alt="" class="m-auto d-block">
            <p class="text-center">徽标嵌花功能性棉袜两双式套装</p>
            <span class="text-center d-block">¥900.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/39.webp" alt="" class="m-auto d-block">
            <p class="text-center">Vintage 格纹裁片棉质长袖 Polo 衫</p>
            <span class="text-center d-block">¥1500.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/41.webp" alt="" class="m-auto d-block">
            <p class="text-center">标志性条纹装饰棉质斜纹抽绳长裤</p>
            <span class="text-center d-block">¥1700.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/43.webp" alt="" class="m-auto d-block">
            <p class="text-center">徽标贴花格纹菱形绗缝外套</p>
            <span class="text-center d-block">¥4100.00</span>
          </li>
          <li class="bbltp col-xl-3 col-md-6 col-12">
            <img src="./img/45.webp" alt="" class="m-auto d-block">
            <p class="text-center">格纹弹力棉合身剪裁短裤</p>
            <span class="text-center d-block">¥1800.00</span>
          </li>
        </ul>
        <div class="spxq d-block text-center">
        <button class="mb-5">浏览全部(88)</button>
      </div>
      </div>
    </div>
    <!-- 下面热品 -->
    <div class="bblrp">
      <div class="row">
        <div class="rp col-xl-4 col-lg-6 col-12">
          <img src="./img/47.webp" alt="" class="m-auto d-block">
          <p class="text-center">「未来传承」系列</p>
          <a href="#" class="text-center d-block">立即选购</a>
        </div>
        <div class="rp col-xl-4 col-lg-6 col-12">
          <img src="./img/48.webp" alt="" class="m-auto d-block"> 
          <p class="text-center">包款</p>
          <a href="#" class="text-center d-block">立即购买</a>
        </div>
        <div class="rp col-xl-4 col-lg-6 col-12">
          <img src="./img/49.webp" alt="" class="m-auto d-block">
          <p class="text-center">BURBERRY 人气单品</p>
          <a href="#" class="text-center d-block">立即购买</a>
        </div>
    </div>
  </div>
    <!-- 页底 -->
    <div class="bblyd bg-light">
        <div class="yd-title">
          <!-- <div class="container"> -->
            <!-- <div class="bblp"> -->
          <p class="text-center">精选推荐</p> 
          <div class="row text-center">         
        <ul class="list-unstyled col-md-4 col-12">
          <li><a href="#">女士</a></li>
          <li><a href="#">2021秋冬男士系列</a></li>
        </ul>
          <ul class="list-unstyled col-md-4 col-12">
          <li><a href="#">男士</a></li>
          <li><a href="#">2021秋冬女士系列</a></li>
        </ul>
          <ul class="list-unstyled col-md-4 col-12">
          <li><a href="#">外套</a></li>
          <li><a href="#">2021秋冬系列世界</a></li>
        </ul>
      </div>
      </div>
      <!-- </div> -->
    </div>
    <!-- 页底1 -->
    <div class="bblyd1 bg-light mt-3">
        <div class="yd-title1">
          <!-- <div class="container"> -->
        <div class="row text-center">
        <ul class="list-unstyled col-md-4 col-12">
          <li><p>联系我们</p>
            <div class="bblp1">
              <img src="./img/-xiaolu.png" alt="">
              <a href="#">
                询问 Burberry 小鹿助理</a>
            </div></li>
        </ul>
        <ul class="list-unstyled col-md-4 col-12">
          <li><p>店铺方位</p>
            <div class="bblp1">
              <a href="#">
                浏览全部精品店</a>
            </div></li>
        </ul>
        <ul class="list-unstyled col-md-4 col-12">
          <li><p>关注我们</p>
            <div class="bblp1">
              <img src="./img/weixin.png" alt="">
              <img src="./img/weibo.png" alt="">
            </div></li>
        </ul>
      </div> 
    </div>
      </div>
    </div>
</body>
</html>